<template>
  <!-- 文章模块 -->
  <article @click="view()">
    <!-- 作者 -->
    <div class="poster">
      <!-- 文章标题 -->
      <h3 v-html="list.title"></h3>
      <!-- 作者信息 -->
      <div class="poster_info">
        <!-- 作者头像 -->
        <div class="avatar">
          <img :src="list.poster_avatar" alt="">
        </div>
        <!-- 作者昵称 -->
        <span>{{ list.poster_name }}</span>
      </div>
    </div>
    <!-- 文章内容 -->
    <section>
      <div class="content" v-html="list.content">
      </div>
    </section>
    <!-- 相关数据 -->
    <div class="other">
      <!-- 创建时间 -->
      <div class="createTime">
        创建时间:{{ list.publish_time }}
      </div>
      <!-- 点赞浏览量 -->
      <div class="num">
        <!-- 点赞量 -->
        <div class="good">
          <i class="iconfont icon-good"></i>
          <span>{{ list['likes_count'] }}</span>
        </div>
        <!-- 浏览量 -->
        <div class="view">
          <i class="iconfont icon-eye"></i>
          <span>{{ list['views_count'] }}</span>
        </div>
      </div>
    </div>
  </article>
</template>

<script setup>
import { reqAddView } from '@/apis/passage';
import { GET_USERID } from '@/utils/tokenAndId';
import { useRouter } from 'vue-router'
let $router = useRouter()

let { list } = defineProps(['list'])

const view = async () => {
  let res = await reqAddView({ userId: GET_USERID(), passageId: list.id })
  if (res.code == 200) {
    $router.push(`/viewpassage/${list.id}`)
  } else {
    console.log('浏览量增加失败');
  }
}
</script>

<style lang="scss" scoped>
// 文章模块
article {
  border-bottom: .0167rem dashed #ccc;
  margin: .0833rem;
  overflow: hidden;

  // 作者
  .poster {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    // 文章标题
    h3 {
      margin-right: .3333rem;
      width: 80%;
      overflow: hidden;
      font-size: .4rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: .7333rem;
      cursor: pointer;
    }

    // 作者信息
    .poster_info {
      display: flex;
      align-items: center;
      margin-right: .333rem;
      width: 20%;

      // 作者头像
      .avatar {
        margin-right: .25rem;
        border-radius: 20%;
        width: .6667rem;
        height: .6667rem;
        overflow: hidden;
        cursor: pointer;

        img {
          width: 100%;
        }
      }

      // 作者昵称
      span {
        width: 50%;
        overflow: hidden;
        font-size: .3rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
      }
    }
  }

  // 文章内容
  section {
    margin: .0833rem 0;
    cursor: pointer;

    .content {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      font-size: .3rem;
      line-height: 1.3;
      color: #666;

      &:hover {
        text-decoration: underline #666 .0083rem;
      }
    }
  }

  // 相关数据
  .other {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .1333rem;

    // 创建时间
    .createTime {
      font-size: .25rem;
      color: #666;
    }

    // 点赞和浏览量
    .num {
      display: flex;
      justify-content: end;
      gap: .3333rem;

      span {
        margin-left: .05rem;
        font-size: .3rem;
        cursor: pointer;
      }

      i {
        font-size: .3rem;
        cursor: pointer;
      }
    }
  }
}
</style>
